<script setup>

import Segment1 from "@/views/index/Segment1.vue";
import Segment2 from "@/views/index/Segment2.vue";
import Segment3 from "@/views/index/Segment3.vue";
import Segment4 from "@/views/index/Segment4.vue";
import Segment5 from "@/views/index/Segment5.vue";
import Segment6 from "@/views/index/Segment6.vue";
import Segment7 from "@/views/index/Segment7.vue";
import Segment8 from "@/views/index/Segment8.vue";
import Segment9 from "@/views/index/Segment9.vue";
import Segment10 from "@/views/index/Segment10.vue";
import Segment11 from "@/views/index/Segment11.vue";
import Segment12 from "@/views/index/Segment12.vue";
import Segment13 from "@/views/index/Segment13.vue";
import {onBeforeUnmount, onMounted, ref, watch} from "vue";
import {cases} from "@/views/case-details/mockCase.ts";
import CasePopup from "@/views/case-details/CasePopup.vue";

const segments = [];
const state = ref({
  s2Enter: false,
  s3Enter: false,
  s4Enter: false,
  s5Enter: false,
  s6Enter: false,
  s7Enter: false,
  s8Enter: false,
  s9Enter: false,
  s10Enter: false,
  s11Enter: false,
  s12Enter: false,
  s13Enter: false,
  curCase: {},
  showCasePopup: false,
})

const onScroll = () => {
  for (let i = 2; i < 14; i++) {
    if (segments[i] === false) {
      const element = document.getElementById(`s${i}`)
      if (!element) return
      if (element.getBoundingClientRect().top < window.innerHeight * 0.5) {
        segments[i] = true;
      }
    }
    if (segments[2] === true) state.value.s2Enter = true
    if (segments[3] === true) state.value.s3Enter = true
    if (segments[4] === true) state.value.s4Enter = true
    if (segments[5] === true) state.value.s5Enter = true
    if (segments[6] === true) state.value.s6Enter = true
    if (segments[7] === true) state.value.s7Enter = true
    if (segments[8] === true) state.value.s8Enter = true
    if (segments[9] === true) state.value.s9Enter = true
    if (segments[10] === true) state.value.s10Enter = true
    if (segments[11] === true) state.value.s11Enter = true
    if (segments[12] === true) state.value.s12Enter = true
    if (segments[13] === true) state.value.s13Enter = true
  }
}
onMounted(() => {
  window.onscroll = onScroll;
  for (let i = 0; i < 14; i++) {
    segments.push(false);
  }
  window.addEventListener('popstate', handlePopState);
  watch(() => state.value.showCasePopup, (newVal) => {
    document.body.style.overflow = newVal ? 'hidden' : '';
  })
})

const showCasePopup = (caseId) => {
  state.value.curCase = cases.find(it => it.caseId === caseId);
  state.value.showCasePopup = true;
}

onBeforeUnmount(() => {
  window.removeEventListener('popstate', handlePopState);
});
const handlePopState = (event) => {
  if (state.value.showCasePopup) {
    state.value.showCasePopup = false;
    document.body.style.overflow = '';
  }
};

</script>

<template>
  <view class="column">
    <Segment1/>
    <Segment2 id="s2" :enter="state.s2Enter"/>
    <Segment3 id="s3" :enter="state.s3Enter"/>
    <Segment4 id="s4" :enter="state.s4Enter"/>
    <Segment5 id="s5" :enter="state.s5Enter" @onCaseShow="showCasePopup"/>
    <Segment6 id="s6" :enter="state.s6Enter"/>
    <Segment7 id="s7" :enter="state.s7Enter"/>
    <Segment8 id="s8" :enter="state.s8Enter"/>
    <Segment9 id="s9" :enter="state.s9Enter"/>
    <Segment10 id="s10" :enter="state.s10Enter"/>
    <Segment11 id="s11" :enter="state.s11Enter"/>
    <Segment12 id="s12" :enter="state.s12Enter"/>
    <Segment13 id="s13" :enter="state.s13Enter"/>
  </view>
  <CasePopup :show="state.showCasePopup"
             :article="state.curCase"
             @onClose="state.showCasePopup = false"/>
</template>

<style scoped>

</style>